<template>
  <div class="course-learn-table">
    <el-table
      class=""
      :data="learnList"
      row-key="id"
      default-expand-all
      empty-text="暂无数据"
      expand="selection"
    >
      <el-table-column prop="section" label="章节目录">
        <template #default="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column prop="finish" label="完成情况">
        <template #default="scope">
          {{
            !scope.row.children
              ? (scope.row.complete_count >= 0
                  ? scope.row.complete_count
                  : '-') +
                '/' +
                (scope.row.total_count || '-')
              : ''
          }}
        </template>
      </el-table-column>

      <el-table-column prop="scoreRate" label="正确率">
        <template #default="scope">
          {{
            !scope.row.children
              ? scope.row.accuracy > 0
                ? Number((scope.row.accuracy * 100).toFixed(2)) + '%'
                : '--'
              : ''
          }}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="compare" label="对比">
      <template #header>
        <el-dropdown class="class-dropdown hover" trigger="click">
          <div class="text hover flex">
            {{ classSelect.label }}
            <RightarrowDownIcon />
          </div>
          <template #dropdown>
            <el-dropdown-menu class="assign-drop">
              <el-dropdown-item
                v-for="(item, index) in classList"
                :key="index"
                @click="classSelect = item"
                >{{ item.label }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
          <el-option />
        </el-dropdown>
      </template>
    </el-table-column> -->
    </el-table>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
import { getChapterAca } from '@/apis/assignment/index'
// import RightarrowDownIcon from '@/assets/images/common/arrow-down.svg?component'

const props = defineProps({
  taskId: {
    required: true
  },
  classSelect: {
    required: true
  }
})
const learnList = ref([])
// const classList = ref([])

/**
 * 获取章节详情
 */
const getChapterAcaInfo = async () => {
  const res = await getChapterAca({
    task_id: props.taskId,
    class_id: props.classSelect.value
  })
  learnList.value = res.data
}
const initData = () => {
  getChapterAcaInfo()
}

watchEffect(() => {
  props.classSelect && initData()
})
</script>

<style lang="less" scoped>
.course-learn-table {
  padding: 20px;
  background-color: #fff;
  .class-dropdown {
    width: 200px;
    font-size: unset;
    line-height: unset;

    .text {
      margin-left: 4px;
      gap: 8px;

      &:focus-visible {
        outline: unset;
      }
    }
  }
  /* stylelint-disable ebag/selector-class-pattern */
  :deep(.cell) {
    line-height: 40px !important;

    .el-table__expand-icon {
      display: none;
    }
  }

  :deep(.el-table__header) {
    .el-table__cell {
      background-color: #f2f4f9;
    }
  }
}
</style>

<!-- eslint-disable -->
<style lang="less">
.assign-drop {
  /* stylelint-disable ebag/scoped-attribute-sfc-style */
  .el-dropdown-menu__item {
    width: 130px;
    text-align: center;
    display: block;

    &:hover {
      background-color: #f5f6fe;
      color: #5466e7;
    }
  }
}
</style>
